<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-select v-model="conditions.province" placeholder="请选择省" size="small" @change="cityFn">
          <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="conditions.city" placeholder="请选择市" size="small" @change="areaFn">
          <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="conditions.area" placeholder="请选择区" size="small">
          <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="5"><el-input v-model="conditions.title" placeholder="请输入学校名称关键字" size="small"></el-input></el-col>
      <el-col :span="4"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <el-row v-if="this.menuList.includes('addSchool')" class="btnBox">
      <el-col :span="2" :offset="20"><el-button type="primary" size="small" @click="distributionFn">分 发</el-button></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="addSchool">新增学校</el-button></el-col>
      <!-- <el-col :span="2"><el-button plain type="primary" size="small" @click="addSchool">导 出</el-button></el-col> -->
    </el-row>
    <div class="table">
      <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="operation" @handleSelectionChange="handleSelectionChange"></simple-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
    <distribution v-if="isDistribution" :isDistribution="this.isDistribution" :id="this.id" @noDistribution="noDistribution"></distribution>
  </div>
</template>
<script>
import simpleTable from '@/components/table.vue'
import distribution from './components/distribution.vue'
import {APISCHOOLLIST, APISCHOOLWHOLEREGION} from '@/common/api.js'
export default {
  components: {
    simpleTable,
    distribution
  },
  data () {
    return {
      menuList: [],
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      conditions: {
        province: '',
        city: '',
        area: '',
        title: ''
      },
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: true,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'title', name: '学校名称'},
          {id: 'province_title', name: '省份'},
          {id: 'city_title', name: '城市'},
          {id: 'area_title', name: '区/县'},
          {id: 'account', name: '超级管理员'},
          {id: 'full_name', name: '联系老师'},
          {id: 'tel', name: '联系电话'},
          {id: 'school_type', name: '学校类型'},
          {id: 'school_ascription', name: '学校归属'},
          {id: 'deadline_end_date', name: '截止时间'},
          {id: 'service_type_title', name: '服务类型'}
        ]
      },
      tableData: [],
      isDistribution: false,
      id: '',
      onSelectList: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('dispatchSchool') || this.menuList.includes('editSchool') || this.menuList.includes('levelSchool') || this.menuList.includes('studentList')) {
      var operation = {id: 'operation', name: '操作', list: []}
      if (this.menuList.includes('dispatchSchool')) {
        var operation1 = {id: 'distribution', name: '分发'}
        operation.list.push(operation1)
      }
      if (this.menuList.includes('editSchool')) {
        var operation2 = {id: 'edit', name: '编辑'}
        operation.list.push(operation2)
      }
      if (this.menuList.includes('levelSchool')) {
        var operation3 = {id: 'hierarchy', name: '层级'}
        operation.list.push(operation3)
      }
      if (this.menuList.includes('schoolPermission')) {
        var operation4 = {id: 'management', name: '人员管理'}
        operation.list.push(operation4)
      }
      this.tableConfig.config.push(operation)
    }
    this.getWholeRegion()
    this.tableList()
  },
  methods: {
    getWholeRegion () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      this.conditions.city = ''
      this.conditions.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.conditions.province
      }).then((res) => {
        this.cityOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    areaFn () {
      this.conditions.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.conditions.city
      }).then((res) => {
        this.areaOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    tableList () {
      APISCHOOLLIST({
        province: this.conditions.province,
        city: this.conditions.city,
        area: this.conditions.area,
        title: this.conditions.title,
        page: this.page
      }).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.tableData = []
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    addSchool () {
      this.$router.push({path: '/addSchool'})
    },
    distributionFn () {
      if (this.onSelectList.length <= 0) {
        this.$message.error('请选择学校')
      } else {
        this.isDistribution = true
        var id = []
        this.onSelectList.forEach(item => {
          id.push(item.id)
        })
        this.id = id.toString()
        console.log(this.id)
      }
    },
    operation (val) {
      if (val.id === 'distribution') {
        this.isDistribution = true
        this.id = val.rows.id.toString()
      } else if (val.id === 'edit') {
        this.$router.push({path: '/editSchool', query: {id: val.rows.id}})
      } else if (val.id === 'hierarchy') {
        this.$router.push({path: '/hierarchy', query: {id: val.rows.id}})
      } else if (val.id === 'management') {
        this.$router.push({path: '/management', query: {id: val.rows.id}})
      }
    },
    handleSelectionChange (val) {
      this.onSelectList = val.val
      console.log(val)
    },
    noDistribution (val) {
      this.isDistribution = false
      if (val !== undefined && val.type === 1) {
        this.tableList()
      }
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    }
  }
}
</script>
